<template>
  <div class="login-container">
    <img src="../../assets/images/loginback.jpg" alt="background" class="background-image">
    <!-- 快帮帮logo -->
    <div class="login-logo">
      <img src="../../assets/images/Logo.png" alt="logo" class="logo-image">
      <span class="system-name">快帮帮</span>
    </div>
    <!-- 登录主体 -->
    <div class="login-body">
      <h3>登录</h3>
      <!-- 用户名密码输入框 -->
      <div class="info">
        <van-cell-group inset>
          <van-field 
          v-model="username" 
          label="用户名" 
          label-align="top" 
          class="custom-field"
          >
            <template #input>
              <input 
              v-model="username" 
              placeholder="请输入用户名" 
              class="input-field"
               />
            </template>
          </van-field>
          <van-field 
          v-model="password" 
          label="密码" 
          type="password" 
          label-align="top" 
          class="custom-field"
          >
            <template #input>
              <input 
              v-model="password" 
              placeholder="请输入密码" 
              type="password" 
              class="input-field"
               />
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <!-- 登录按钮 -->
      <div class="btn" @click="onLogin">
        <van-button color="#4095E5" type="primary" size="large" block class="custom-button">登录</van-button>
      </div>
      <!-- 转向注册按钮 -->
      <div class="other">
        <div class="register">
          <span>没有账号？</span>
          <a href="/register" class="register-link">立即注册</a>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script setup lang="ts">
import {ref,reactive} from "vue"
import { useTokenStore } from "../../stores/Login" 
import { useRouter } from "vue-router"

const username = ref<string>('')
const password = ref<string>('')
const tokenStore=useTokenStore()
const router = useRouter()


const onLogin = async() => {
  tokenStore.setToken({
    username,
    password
  },()=>{
    console.log("成功了");
    router.replace("/")
  },(error:Object)=>{
    console.log(error);
    alert("用户名或密码错误");
  })
}
</script>
<style lang="less" scoped>
html, body {
  overflow: hidden; /* 禁止页面上下滑动 */
  height: 100%; /* 确保body和html占满整个视口 */
  margin: 0; /* 去除默认的外边距 */
}
.login-container {
  position: relative;
  width: 100%;
  height: 100vh; 
  overflow: hidden; 
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  z-index: -1; /* 将背景图片置于底层 */
}

.login-logo{
  position: absolute;
  top: 113px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center; 
  z-index: 1; /* 将logo置于上层 */
}
.logo-image{
  width: 118px;
  height: 111px;
}
.system-name{
  text-align: center;
  color: #FFFFFF;
  font-size: 20px;
}

.login-body{
  position: absolute;
  width: 317px;
  height: 331px;
  top: 279px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFFFFF;
  border-radius: 13px;
}
.login-body h3{
  text-align: center;
  margin-top: 22px;
}


.custom-field .van-field__control {
  padding: 0; 
}

.input-field {
  width: 100%;
  height: 36px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  padding: 8px; 
  box-sizing: border-box; /* 确保内边距和边框包含在高度和宽度内 */
}

.btn{
  width:253px ;
  
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
  top: 200px;
}

.custom-button{
  height: 36px;
  line-height: 36px;
  font-size: 12px;
}

.other{
  font-size: 10px;
  position: absolute;
  top: 270px;
  left: 36px;
}

.register-link{
  color: #4095E5;
  font-size: 10px;
}

</style>
